<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: right;" type="primary" @click="isShowPermission = true">添加权限</el-button>
      </div>
      <template>
        <el-table
          :data="permissionsList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="权限名称"
          />
          <el-table-column
            prop="code"
            label="权限标识"
          />
          <el-table-column
            prop="description"
            label="权限描述"
          />
          <el-table-column
            label="操作"
            align="right"
          >
            <template v-slot="obj">
              <el-button v-if="obj.row.type==='1'" type="primary" @click="addPermission(obj.row.id)">添加子权限</el-button>
              <el-button @click="editPermissions(obj.row.id)">编辑</el-button>
              <el-button type="danger" @click="delPermissions(obj.row.id)">删除</el-button></template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          :pager-count="5"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 添加/编辑弹出框 -->
    <el-dialog
      :visible="isShowPermission"
      :title="formData.id?'编辑权限':'添加权限'"
      @close="cancelFn"
    >
      <el-form ref="Permission" :model="formData" :rules="rules">
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="btnFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionsList, getPermissionsSum, delPermissions, getPermissionsId, aditPermissions, addPermissions } from '@/api/permission'
export default {
  data() {
    return {
      formData: {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      },
      rules: {
        title: [{ required: true, message: '不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      isShowPermission: false,
      total: 0,
      pageConfig: {
        _limit: 5,
        _start: 0
      },
      permissionsList: [] // 保存页面权限列表
    }
  },
  created() {
    this.getPermissionsList()
    // 获取权限数量
    this.getPermissionsSum()
  },
  methods: {
    // 点击确定
    async btnFn() {
      // 校验表单
      await this.$refs.Permission.validate()
      // 发送请求
      if (this.formData.id) {
        // 编辑
        await aditPermissions(this.formData)
      } else {
        // 新增
        await addPermissions(this.formData)
      }
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹框
      this.isShowPermission = false
      // 更新页面
      this.getPermissionsList()
    },
    // 取消
    cancelFn() {
      // 清理校验
      this.$refs.Permission.resetFields()
      // 清理数据
      this.formData = {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      }
      // 关闭弹窗
      this.isShowPermission = false
    },
    // 获取权限数量
    async getPermissionsSum() {
      const res = await getPermissionsSum()
      this.total = res.data
    },
    // 点击页码更新
    pageChange(newPage) {
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      this.getPermissionsList()
    },
    // 点击新增子权限按钮
    async addPermission(id) {
      const res = await getPermissionsId(id)
      console.log(res)
      this.formData.pid = String(res.data.id)
      this.formData.type = '2'
      console.log(149, this.formData)
      this.isShowPermission = true
    },
    // 编辑
    async editPermissions(id) {
      // 数据回显
      const res = await getPermissionsId(id)
      console.log(res)
      this.formData = res.data
      this.isShowPermission = true
    },
    // 删除
    async delPermissions(id) {
      // 二次确认
      await this.$confirm('是否确认删除')
      // 发送请求
      await delPermissions(id)
      // 提示用户
      this.$message.success('删除成功')
      // 更新页面
      this.getPermissionsList()
    },
    // 获取权限列表
    async getPermissionsList() {
      const res = await getPermissionsList(this.pageConfig)
      this.permissionsList = res.data
      console.log(this.permissionsList)
    }
  }

}
</script>

<style>
.el-card{
  margin: 20px;
}
.block{
   margin-top: 30px;
 text-align: center;
}
</style>
